<template>
    <div>
        <ul>
            <li v-for="(item,index) in items" :key="index" :id="index" :class="num==index?cl:others" @mouseover="changestyle($event,item.link)">{{item.listname}}</li>
            <router-view></router-view>
        </ul>
    </div>
</template>

<script>
export default {
    name:"ljz",
    data(){
        return{
            num:5,
            cl:"cl",
            others:"others",
            items:[
                {listname:"首页",
                link:"/home"},
                {listname:"课程名称",
                link:"/course"},
                {listname:"关于我们",
                link:"/about"},
                {listname:"登录",
                link:"/login"},
                {listname:"FAQ",
                link:"/FAQ"}
            ]
        }
    },
    methods:{
        changestyle(event,link){
            this.num=event.target.id
            this.$router.push(link) //push里面输入的是路径；
        }
    }
}
</script>

<style scoped>
.cl{
    background-color: brown;
}
.others{
    background-color:whitesmoke;
}
ul li{
  list-style-type: none;
  float: left;
  height: 60px;
  line-height: 60px;
  width: 120px;
  text-align: center;
}
div{
  width: 100%;
  height: 60px;
  background-color: whitesmoke;
}
ul{
  width: 100%;
  height: 60px;
}
</style>